<template>
  <h2>{{ person }}</h2>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工资：{{ salary }}</h2>

  <button @click="name += '~'">改姓名</button>
  <button @click="age++">改年龄</button>
  <button @click="salary++">涨工资</button>
</template>
  
  <script>
import {
 
  toRefs,
  reactive,
  computed,
  ref,
  watch,
  watchEffect,
  toRef,
} from "vue";
export default {
  name: "App",
  components: {},

  setup(props, context) {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    // 一项一项的向外暴露 还不想丢失响应式
    const name = toRef(person, "name");
    const age = toRef(person, "age");
    const salary = toRef(person.job.j1, "salary");
    // 全部导出
    const p =toRefs(person)
    return {  person,name, age, salary ,...p};
  },
};
</script>
  
  <style>
</style>
  